<template>
  <div class="table-page app-container">
    <my-table :data="tableData">
      <table-column label="序号" prop="no">
        <template v-slot:default="scoped">
          <span>{{ scoped.$index + 1 }}</span>
        </template>
      </table-column>

      <table-column label="名字" prop="name" />

      <table-column label="数量" prop="number" />

      <table-column label="价格" prop="price">
        <template v-slot:default="scoped">
          <span>￥{{ scoped.$text }}</span>
        </template>
      </table-column>

      <table-column label="总价" prop="totalPrice">
        <template v-slot:default="scoped">
          <span>￥{{ scoped.$row.number * scoped.$row.price }}</span>
        </template>
      </table-column>
    </my-table>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import { Table as MyTable, TableColumn } from '@/components/Table'

@Component({
  name: 'TablePage',
  components: {
    MyTable,
    TableColumn,
  },
})
export default class extends Vue {
  private tableData: any[] = [
    {
      name: '猫',
      number: 23,
      price: 500,
    },
    {
      name: '狗',
      number: 24,
      price: 800,
    },
  ]
}
</script>
